<template>
    <div id="container">
        <div id="header">
        </div>
        <div id="container">
            <div id="content2">
                <table width="100%" height="41" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="15" height="18" align="left" valign="top">
                            <div align="left"></div>
                        </td>
                        <td width="385" align="left" valign="bottom" class="12">&nbsp;</td>
                    </tr>
                    <tr>
                        <td height="4" colspan="2" align="left" valign="bottom"></td>
                    </tr>
                    <tr>
                        <td height="15" align="left" valign="top">&nbsp;</td>
                        <td height="15" align="left" valign="top" class="12">
                            <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td height="20">
                                        <div class="right_proaducts">我的位置&gt;&gt;科技项目申报&gt;登录用户列表<br />
                                            <br />
                                        </div>
                                        <form action="" method="post" id="form">
                                            <DIV class=padding>
                                                <DIV id=middlebody>

                                                    <el-button @click="dialogVisible = true">添加</el-button>
                                                    <el-table :data="projects" :row-class-name="tableRowClassName">
                                                        <el-table-column label="编号id"
                                                            prop="categoryid"></el-table-column>
                                                        <el-table-column label="分类名称"
                                                            prop="categoryname"></el-table-column>
                                                        <el-table-column label="开始申报时间"
                                                            prop="rep_start_time"></el-table-column>
                                                        <el-table-column label="申报结束时间"
                                                            prop="rep_stop_time"></el-table-column>
                                                        <el-table-column label="评审专家" prop="name"></el-table-column>
                                                        <el-table-column label="操作">
                                                            <template slot-scope="scope">
                                                                <el-row>
                                                                    <el-button type="danger"
                                                                        @click="deleteByIds(scope.row)">删除</el-button>
                                                                    <el-button type="danger"
                                                                        @click="updateByIds(scope.row)">修改</el-button>
                                                                </el-row>
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>

                                                    <!-- 更新-->
                                                    <!--更新数据对话框表单-->
                                                    <el-dialog title="更新" :visible.sync="updateVisible" width="30%">
                                                        <el-form ref="form" :model="updateEx" label-width="80px">
                                                            <el-form-item label="编号id">
                                                                <el-input v-model="updateEx.categoryid"></el-input>
                                                            </el-form-item>

                                                            <el-form-item label="分类名称">
                                                                <el-input v-model="updateEx.categoryname"></el-input>
                                                            </el-form-item>

                                                            <el-form-item label="申报开始时间">
                                                                <el-date-picker v-model="updateEx.rep_start_time"
                                                                    type="date" placeholder="选择日期">
                                                                </el-date-picker>
                                                            </el-form-item>

                                                            <el-form-item label="申报结束时间">
                                                                <el-date-picker v-model="updateEx.rep_stop_time"
                                                                    type="date" placeholder="选择日期">
                                                                </el-date-picker>
                                                            </el-form-item>

                                                            <el-form-item label="评审专家">
                                                                <el-input v-model="updateEx.name"></el-input>
                                                            </el-form-item>

                                                            <el-form-item>
                                                                <el-button type="primary"
                                                                    @click="updateProject()">提交</el-button>
                                                                <el-button @click="updateVisible = false">取消</el-button>
                                                            </el-form-item>
                                                        </el-form>

                                                    </el-dialog>

                                                    <!-- 新增页面  -->
                                                    <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
                                                        <el-form ref="form" :model="addEx" label-width="80px">
                                                            <el-form-item label="编号id">
                                                                <el-input v-model="addEx.categoryid"></el-input>
                                                            </el-form-item>

                                                            <el-form-item label="分类名称">
                                                                <el-input v-model="addEx.categoryname"></el-input>
                                                            </el-form-item>

                                                            <el-form-item label="申报开始时间">
                                                                <el-date-picker v-model="addEx.rep_start_time"
                                                                    type="date" placeholder="选择日期">
                                                                </el-date-picker>
                                                            </el-form-item>

                                                            <el-form-item label="申报结束时间">
                                                                <el-date-picker v-model="addEx.rep_stop_time"
                                                                    type="date" placeholder="选择日期">
                                                                </el-date-picker>
                                                            </el-form-item>

                                                            <el-form-item label="评审专家">
                                                                <el-input v-model="addEx.name"></el-input>
                                                            </el-form-item>

                                                            <el-form-item>
                                                                <el-button type="primary"
                                                                    @click="updateProject()">提交</el-button>
                                                                <el-button @click="dialogVisible = false">取消</el-button>
                                                            </el-form-item>
                                                        </el-form>
                                                    </el-dialog>
                                                </DIV>
                                            </DIV>
                                        </form>
                                    </td>
                                </tr>
                            </table>
                            <br />
                            <div class="table_wz"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '../../utils/Myaxios'
const options = {
    data() {
        return {
            projects: [],
            updateVisible: false,
            updateEx: {
                categoryid: '',
                categoryname: '',
                rep_start_time: '',
                rep_stop_time: '',
                name: '',
            },
            addEx: {
                categoryid: '',
                categoryname: '',
                value1: '',
                value2: '',
                name: '',
            },
            dialogVisible: false
        }
    },
    mounted() {
        this.get();
    },
    methods: {
        async get() {
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            const resp = await _axios.get('/projectcategorys/selectFour');
            this.projects = resp.data.data;
            // console.log(resp)
        },
        // eslint-disable-next-line no-unused-vars
        deleteByIds(row) {

        },
        // 每行颜色
        // eslint-disable-next-line no-unused-vars
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 0) {
                return 'warning-row';
            } else if (rowIndex === 2) {
                return 'success-row';
            }
            return '';
        },
        //   数据回显
        updateByIds(row) {
            this.updateEx = {
                categoryid: row.categoryid,
                categoryname: row.categoryname,
                rep_start_time: row.rep_start_time,
                rep_stop_time: row.rep_stop_time,
                name: row.name,
            },
                this.updateVisible = true;
        },
        // 更新数据
        async updateProject() {
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            await _axios.post('/projectcategorys/project', {}, {
                params: {
                    update: this.updateEx
                }
            })
        }
    }
}
export default options
</script>

<style>
@import '../../assets/static/andreasblue.css';

.el-table .warning-row {
    background: cornflowerblue
}

.el-table .success-row {
    background: gray
}
</style>